<h1>...</h1>, <h2>...</h2>, <h6>...</h6>, <div>...</div>, <section>...</section>, <p>...</p>, <form>...</form>¶<form>...</form> e implementar atalhos especiais para torná-los mais fáceis de usar. Arquivo: index.html
<!--Arquivo index.html-->
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Aula03</title>
<link rel="stylesheet" href="css/estilo.css">
</head>
<body>
<!-- Em algum lugar dentre da tag <body>...</body> -->
<form>
... inserir aqui suas tags de formulário aqui
</form>
</body>
</html>
<form>...</form> aceita a configuração de alguns atibutos:autocomplete¶Atributo autocomplete: define se os valores dos campos do formulário podem por padrão serem preenchidos automaticamente ou não.
off: usuário deve inserir explicitamente um valor em cada campo para cada uso, ou o documento fornece seu próprio método de preenchimento automático; o navegador não completa as entradas automaticamente.on: o navegador pode preencher automaticamente os valores com base nos valores que o usuário inseriu durante os usos anteriores do formulário.Exemplo:
Arquivo: index.html
<!--Arquivo index.html-->
<!DOCTYPE html>
<html lang="pt-br">
<!-- Omitido para facilitar o entendimento -->
<body>
<!-- Em algum lugar dentre da tag <body>...</body> -->
<form autocomplete="on">
... inserir aqui suas tags de formulário
</form>
</body>
</html>
name¶Atributo name: indica o nome do formulário, pois em uma página poderei ter mais de um. E este atributo será usado para identificá-lo.
Exemplo:
Arquivo: index.html
<!--Arquivo index.html-->
<!DOCTYPE html>
<html lang="pt-br">
<!-- Omitido para facilitar o entendimento -->
<body>
<!-- Em algum lugar dentre da tag <body>...</body> -->
<form name="form1">
... inserir aqui suas tags de formulário
</form>
</body>
</html>
action¶Atributo action: define onde os dados são enviados. Seu valor deve ser um URL válido. Se esse atributo não for fornecido, os dados serão enviados para o URL da página que contém o formulário.
Exemplo:
Arquivo: index.html
<!--Arquivo index.html-->
<!DOCTYPE html>
<html lang="pt-br">
<!-- Omitido para facilitar o entendimento -->
<body>
<!-- Em algum lugar dentre da tag <body>...</body> -->
<form action="http://teste.com" name="form1">
... inserir aqui suas tags de formulário
</form>
</body>
</html>
method¶method: define como os dados são enviados. GET: se um formulário é enviado usando esse método, os dados enviados ao servidor são anexados ao URL. Os dados são anexados ao URL como uma série de pares nome/valor. Após a conclusão do endereço da Web de URL, incluímos um ponto de interrogação (?) seguido dos pares nome/valor, cada um separado por um e comercial (&). POST: se um formulário é enviado usando esse método, os dados são anexados ao corpo da solicitação HTTP. As solicitações HTTP nunca são exibidas para o usuário. Do lado do sevidor, para acessar estes dados, depende da plataforma de desenvolvimento que você usa e de quaisquer frameworks específicos que você possa usar com ele. Arquivo: index.html
<!--Arquivo index.html-->
<!DOCTYPE html>
<html lang="pt-br">
<!-- Omitido para facilitar o entendimento -->
<body>
<!-- Em algum lugar dentre da tag <body>...</body> -->
<form action="http://teste.com" name="form1" method="POST">
... inserir aqui suas tags de formulário
</form>
</body>
</html>
enctype¶Atributo enctype: define o tipo MIME de conteúdo usado para enviar o formulário ao servidor.
method = "post": esse atributo enctype é o tipo MIME de conteúdo usado para enviar o formulário ao servidor. Os valores possíveis são:application/x-www-form-urlencoded: é o valor padrão se o atributo não for especificado.multipart/form-data: esse valor se estiver usando um elemento <input> com o atributo type definido como "file".texto/simples (HTML5): esse valor pode ser substituído por um atributo formenctype em um elemento <button> ou <input>.Exemplo:
Arquivo: index.html
<!--Arquivo index.html-->
<!DOCTYPE html>
<html lang="pt-br">
<!-- Omitido para facilitar o entendimento -->
<body>
<!-- Em algum lugar dentre da tag <body>...</body> -->
<form action="http://teste.com" name="form1" method="POST" enctype="multipart/form-data">
... inserir aqui suas tags de formulário
</form>
</body>
</html>
novalidate¶Atributo novalidate: define se o formulario deverá ou nào ser validado ao ser enviado.
Exemplo:
Arquivo: index.html
<!--Arquivo index.html-->
<!DOCTYPE html>
<html lang="pt-br">
<!-- Omitido para facilitar o entendimento -->
<body>
<!-- Em algum lugar dentre da tag <body>...</body> -->
<form action="http://teste.com" name="form1" method="POST" enctype="multipart/form-data" novalidate>
... inserir aqui suas tags de formulário
</form>
</body>
</html>
target¶Atributo target: se o botão é um botão de envio, esse atributo é um nome ou palavra-chave indicando onde exibir a resposta que é recebida após o envio do formulário. As seguintes palavras-chaves possuem significados especiais:
_self: Carrega a resposta no mesmo contexto navegação como o atual. Esse valor é o padrão se o atributo não é especificado._blank: Carrega a resposta em um contexto de navegação sem nome._parent: Carrega a resposta no contexto de navegação pai do atual. Se não há nenhum pai, essa opção passa a ser o mesmo que _self._top: Carrega a resposta para o contexto de navegação no nível superior (ou seja, o contexto de navegação é um ancestral do atual e não possui nenhum pai). Se não possui nenhum pai, essa opção passa a agir da mesma forma que _self.Exemplo:
Arquivo: index.html
<!--Arquivo index.html-->
<!DOCTYPE html>
<html lang="pt-br">
<!-- Omitido para facilitar o entendimento -->
<body>
<!-- Em algum lugar dentre da tag <body>...</body> -->
<form action="http://teste.com" name="form1" method="POST" enctype="multipart/form-data" novalidate target="_blank">
... inserir aqui suas tags de formulário
</form>
</body>
</html>
Figura 1: representa a arquitetura
| Fonte: MDN Web Docs (2022?). Disponível em: MDN Web Docs. Acesso em: 14 ago 2022. |
<fieldset>...</fieldset> e <legend>...</legend>¶<fieldset>...</fieldset>, incluindo um <legend>...</legend> logo abaixo da tag de abertura <fieldset>. O conteúdo textual da <legend>...</legend> formalmente descreve a finalidade da <fieldset>...</fieldset>. É incluído entre as tags <fieldset>...</fieldset>.
Sintaxe:
<fieldset>
<legend> Legenda do Fieldset </legend>
....demais conteúdos ...
</fieldset>
Arquivo: index.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Tags de Formulários</title>
</head>
<body>
<form method="post" action="" name="form1" >
<fieldset> <!-- Adicionado -->
<legend>Informações Pessoais</legend> <!-- Adicionado -->
</fieldset> <!-- Adicionado -->
</form>
</body>
</html>
Figura 2: tag fieldset sem formatação de estilos CSS
| Fonte: Autoria própria |
Arquivo: index.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Tags de Formulários</title>
</head>
<body>
<form method="post" action="" name="form1" >
<fieldset> <!-- Adicionado -->
<legend>Informações Pessoais</legend> <!-- Adicionado -->
</fieldset> <!-- Adicionado -->
</form>
</body>
</html>
Arquivo: estilo.css
/* Todos os elementos dentro do fieldset, receberão estas configurações */
/* Exceto se forem especificados individualmente após esta definição */
/* Caso a altura não seja definida, ele assumirá conforme o conteúdo do fieldset. */
fieldset {
width: 600px; /* largura */
height: 200px; /* altura */
font-family: Tahoma; /* família de fontes */
font-size: 22px; /* tamanho da fonte */
font-weight: bold; /* estilo negrito aplicado na fonte */
background-color: #cbdaf2; /* cor de plano de fundo */
border: 3px #fff solid; /* espessura cor estilo da borda do fieldset */
text-shadow: 2px 2px 10px #fff; /* x y blur cor da sombra de texto */
box-shadow: 2px 2px 10px black; /* x y blur cor da sombra da caixa */
}
/* A legenda será configurada conforme indicado */
legend {
color: #09224a; /* Cor do texto da legenda */
background-color: #cbdaf2; /* Cor de fundo da legenda */
padding: 10px;
border: 3px #fff solid; /* Borda da legenda, modificando a espessura, cor, e tipo */
border-radius: 2em; /* Cantos arredondados da legenda */
text-shadow: 2px 2px 10px #fff;
box-shadow: 2px 2px 10px black;
}
Figura 3: tag fieldset com formatação de estilos CSS
| Fonte: Autoria própria |
<label for=" ">...</label>¶<label for = " ">...</label> é uma maneira de definirmos um rótulo (uma etiqueta) para os elementos de um formulário. Elemento importante para criar formulários acessíveis (quando implementados adequadamente, os leitores de tela fazem a leitura do rótulo de um elemento do formulário juntamente com quaisquer instruções relacionadas).
for da tag <label>...</label> serve para relacionar uma tag <label>...</label> com uma tag <input> pelo seu respectivo identificador ID, assim o texto do label torna-se clicável, dando foco no input correspondente identificado pelo seu id. Sintaxe:
<label for="identificador">Label</label>
Arquivo: index.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Tags de Formulários</title>
</head>
<body>
<form method="post" action="" name="form1" >
<fieldset>
<legend>Informações Pessoais</legend>
<label for="nome">Nome completo: </label> <!-- Adicionado -->
<input type="text" id="nome" name="nomeusuario"> <!-- Adicionado -->
</fieldset>
</form>
</body>
</html>
Arquivo: estilo.css
/* Arquivo estilo.css omitido para facilitar entendimento. Não foi modificado. */
Figura 4: tag label e input com formatação de estilos CSS
| Fonte: Autoria própria |
outline¶Para modificar a cor e o formato interno da linha exibida ao redor da caixa de preenchimento, utilize a propriedade CSS outline para defini-la.
Exemplo:
Arquivo: index.html
<!-- Arquivo index.html -->
<!-- Estrutura HTML mantida a mesma do exemplo anterior -->
<!-- Omitido para facilitar entendimento -->
Arquivo: estilo.css
/* Arquivo estilo.css */
/* Modificado para formatar a propriedade CSS outline na tag input */
input {
outline: darkblue solid 5px; /* Adicionado para destacar o outline da caixa de texto */
}
Figura 5: tag input e outline com formatação de estilos CSS
| Fonte: Autoria própria |
<input>¶<input>. Eles são uma maneira muito conveniente para permitir que o usuário insira qualquer tipo de dados. <input>:¶name¶name: serve para representar uma coleção de valores, enviados através de um formulário, para o servidor. <input type="text" id="nome" name="nomeusuario">
required¶required é usado para marcar um campo do formulário como obrigatório, ao tentar enviar o formulário, os navegadores farão a verificação e exibirão uma mensagem e posicionarão o cursor no primeiro campo inválido. Ao pressionar enter, o navegador fará a validação dos campos do formulário que possue a tag required. Caso exista um botão do tipo submit, a validação será feita no momento em que é pressionado.
Sintaxe:
<input type="text" id="nome" required>
Figura 6: tag input com o atributo required
| Fonte: Autoria própria |
min e max¶min e max são necessários quando é preciso definir os valores mínimos e máximos para campos de valores. Por exemplo, para os tipos number, range. <input type="number" id="idade" min="10" max="100">
Figura 7: tag input com o atributo required
| Fonte: Autoria própria | Fonte: Autoria própria |
step¶step é utilizado quando é ncessário incluir de quantos em quantos ocorre para os tipos de dados de entrada de data/hora, range, number. <input type="number" id="idade" min="10" max="100" step="2">
placeholder¶placeholder: Este é o texto que aparece dentro da caixa de entrada de texto que descreve a finalidade da caixa brevemente. <fieldset>
<legend>Informações Pessoais</legend>
<label for="nome">Nome completo</label>
<input type="text" id="nome" placeholder="Indique seu nome completo">
</fieldset>
Figura 8: tag input com o atributo placeholder
| Fonte: Autoria própria |
pattern¶pattern é suportado onde quer que o atributo placeholder seja permitido. <input> deve satisfazer. Ao inserir este atributo, a boa prática sugere a inserção do atributo title indicando a descrição do padrão. O atributo title é utilizado para indicar ao usuário o que deve ser inserido.
Sintaxe:
<fieldset>
<legend>Informações Pessoais</legend>
<!-- omitido -->
<input type="text" id="cel" placeholder="+55(99)9999-9999" pattern="+55(99)9999-9999" title="+55(99)9999-9999"> <!-- inserido -->
</fieldset>
placeholder. title ao passar o mouse sobre.Figura 9: tag input com o atributo pattern e title (como apoio)
| Fonte: Autoria própria | Fonte: Autoria própria |
readonly¶readonly indica que o usuário não pode modificar o valor de entrada. O usuário não consegue selecionar a caixa de texto para inserir o nome.
Sintaxe:
<input type="text" id="nome" readonly>
disabled¶disabled indica que o valor de entrada nunca é enviado com o resto dos dados do formulário. E que o usuário não pode modificar o valor de entrada. <input type="text" id="nome" disabled>
size¶size indica qual é o tamanho físico da caixa. O conteúdo a ser digitado poderá ser maior do que o definido em size. <input type="text" id="nome" size="70">
Figura 10: tag input com o atributo size=10 e size=45
| Fonte: Autoria própria | Fonte: Autoria própria |
maxlength¶maxlength indica o número máximo de caracteres que podem ser inseridos na caixa. É aplicável nos tipos de dados text, password, url, search, tel, email. Este complementa o atributo size que define externamente a caixa de texto, e este aqui, internamente (conteúdo). <input type="text" id="nome" size="10" maxlength="30">
<input type="text" id="nome" size="45" maxlength="30">
size sendo igual a 10 ou 45, e o tamanho máximo (maxlength) definido como 30, não conseguimos digitar mais informação na caixa de texto. Figura 11: tag input com o atributo size=10 | maxlength=30 e size=45 | maxlength=30
| Fonte: Autoria própria | Fonte: Autoria própria |
autofocus¶autofocus: especifica qual elemento terá o foco direcionado. Somente um único elemento por página poderá ter este atributo. <input type="text" id="nome" autofocus>
type¶type possui diversos valores (tipos) que poderão ser indicados conforme o conteúdo a ser inserido.type: é um atributo obrigatório para a tag <input> e define o tipo de entrada de texto que está sendo usada. O valor default é type="text".
Sintaxe:
<input type="tipos" id="nome" name="nomeusuario">
type para a tag <input>¶Existentes em versões anteriores ao HTML¶type="text"¶É o valor padrão para a tag <input>.
Sintaxe:
<fieldset>
<legend> Texto </legend>
<label for="texto">Type: text</label>
<input type="text" id="texto"> <!--- Adicionado -->
</fieldset>
type="password"¶É um campo de senha. Exibido uma caixa com símbolos para ocultar a senha digitada.
Sintaxe:
Arquivo: index.html
<!-- Arquivo index.html -->
<!-- Estrutura HTML mantida a mesma do exemplo anterior, exceto a inclusão do input -->
<!-- Omitido para facilitar entendimento -->
<fieldset>
<legend>Senha</legend>
<label for="texto">Senha:</label>
<input type="password" id="texto"> <!--- Adicionado -->
</fieldset>
Arquivo: estilo.css
/* Arquivo estilo.css */
/* Modificado para formatar a propriedade CSS da tag input do tipo password */
input[type="password"]{
background: lightblue;
color: darkblue;
}
Figura 12: tag input com o atributo type="password" e alteração cor de fundo
| Fonte: Autoria própria |
type="radio"¶Para que funcione adequadamente, é necessário definir o mesmo valor do atributo name para cada uma das opções de radio. Caso contrário, será possível selecioanr mais de um.
Sintaxe:
Arquivo: index.html
<!-- Arquivo index.html -->
<!-- Estrutura HTML mantida a mesma do exemplo anterior, exceto a inclusão das opções radio -->
<!-- Omitido para facilitar entendimento -->
<fieldset>
<legend>Radio Button</legend>
<label for="if1"> Institutos Federais </label>
<div class="radio">
<input type="radio" id="if1" name="ifs" checked>
<label for="if1" class="linha">IFSP</label>
</div>
<div class="radio">
<input type="radio" id="if2" name="ifs">
<label for="if2" class="linha">IFF</label>
</div>
<div class="radio">
<input type="radio" id="if3" name="ifs">
<label for="if3" class="linha">IFMG</label>
</div>
<div class="radio">
<input type="radio" id="if4" name="ifs">
<label for="if4" class="linha">IF Sudeste de Minas</label>
</div>
</fieldset>
Figura 13: tag input com o atributo type="radio"
| Fonte: Autoria própria |
type="checkbox"¶name de cada uma das opções de checkbox.Importante definir o atributo tabindex para indicar a sequencia de tabulaçòes via teclado.
Sintaxe:
Arquivo: index.html
<!-- Arquivo index.html -->
<!-- Estrutura HTML mantida a mesma do exemplo anterior, exceto a inclusão das opções checkbox -->
<!-- Omitido para facilitar entendimento -->
<fieldset>
<legend>Checkbox</legend>
<div class="checkbox">
<input type="checkbox" id="l1" name="ling1" checked tabindex="1">
<label for="l1" class="linha">Python</label><br>
</div>
<div class="checkbox">
<input type="checkbox" id="l2" name="ling2" tabindex="2">
<label for="l2" class="linha">JAVA</label><br>
</div>
<div class="checkbox">
<input type="checkbox" id="l3" name="ling3" tabindex="3">
<label for="l3" class="linha">PHP</label><br>
</div>
<div class="checkbox">
<input type="checkbox" id="l4" name="ling4" tabindex="4" >
<label for="l4" class="linha">C#</label><br>
</div>
</fieldset>
Figura 14: tag input com o atributo type="checkbox"
| Fonte: Autoria própria |
type='submit'¶Exibido o conteúdo de value. Se o atributo name for inserido, ao enviar o formulário será enviado o name e o seu value.
Sintaxe:
Arquivo: index.html
<!-- Arquivo index.html -->
<!-- Estrutura HTML mantida a mesma do exemplo anterior, exceto a inclusão do input -->
<!-- Omitido para facilitar entendimento -->
<fieldset>
<legend>Enviar o formulário</legend>
<label for="texto">Botão do tipo submit</label><br>
<input type="submit" id="texto">
</fieldset>
Arquivo: estilo.css
/* Arquivo estilo.css */
/* Modificado para formatar a propriedade CSS da tag input do tipo password */
input[type="submit"]{
background: lightblue;
color: darkblue;
}
Figura 15: tag input com o atributo type="submit"
| Fonte: Autoria própria |
type="reset"¶Não é muito usado devido a experiências desagradáveis.
Sintaxe:
<fieldset>
<legend>Limpar o formulário</legend>
<label for="texto">Type: reset</label><br>
<input type="reset" id="texto">
</fieldset>
type="file"¶name, disabled, accept, autofocus, multiple, required, capture. O atributo accept de alguns navegadores móveis permite acesso a câmera, microfone de alguns dispositivos.
Sintaxe:
Arquivo: index.html
<!-- Arquivo index.html -->
<!-- Estrutura HTML mantida a mesma do exemplo anterior, exceto a inclusão das opções do input -->
<!-- Omitido para facilitar entendimento -->
<fieldset>
<legend>Carregar arquivo</legend>
<label for="texto">Type: file</label><br>
<input type="file" id="texto">
</fieldset>
Figura 16: tag input com o atributo type="file"
| Fonte: Autoria própria |
type="hidden"¶Permite os atributos name, value. O campo com este tipo de dados não é exibido no formulário, utilizado para passar valores para os servidores.
Sintaxe:
Arquivo: index.html
<fieldset>
<legend>Esconder</legend>
<label for="texto">Type: hidden</label><br>
<input type="hidden" id="texto">
</fieldset>
type="image"¶É semelhante ao comportamento do tipo submit e utiliza todos os atributos da tag <img>, especificamente src=" ", alt=" ".
Sintaxe:
Arquivo: index.html
<!-- Arquivo index.html -->
<!-- Estrutura HTML mantida a mesma do exemplo anterior, exceto a inclusão das opções do input -->
<!-- Omitido para facilitar entendimento -->
<fieldset>
<legend>Imagem</legend>
<label for="texto">Type: image</label><br>
<input type="image" id="texto" src="logoDWE.jpg">
</fieldset>
Arquivo: estilo.css
/* Arquivo estilo.css */
/* Modificado para formatar a propriedade CSS da tag input do tipo image */
input[type="image"] {
width: 100px;
height: 100px;
}
Imagem utilizada no exemplo: bola
Figura 17: tag input com o atributo type="image"
| Fonte: Autoria própria |
type="button"¶É um botão, e é usado para manipular eventos.
Sintaxe:
Arquivo: index.html
<!-- Arquivo index.html -->
<!-- Estrutura HTML mantida a mesma do exemplo anterior, exceto a inclusão das opções do input -->
<!-- Omitido para facilitar entendimento -->
<fieldset>
<legend>Botão</legend>
<label for="texto">Type: button</label><br>
<input type="button" id="texto" value="Executar">
</fieldset>
/* Inserir no arquivo .css */
input[type="button"] {
background: lightblue;
color: darkblue;
font-size: 20px;
margin: 10px;
border-width: 0 2px 0 2px; /* Ordem: top, right, bottom, left */
border-style: solid;
border-color: #444;
}
Figura 18: tag input com o atributo type="button"
| Fonte: Autoria própria |
Surgiram com HTML5¶type="number"¶É um campo de texto para inserir um número. Permitido a combinação dos atributos min, max e step. Em alguns dispositivos móveis permite exibir um teclado numérico.
Sintaxe:
Arquivo: index.html
<!-- Arquivo index.html -->
<!-- Estrutura HTML mantida a mesma do exemplo anterior, exceto a inclusão das opções do input -->
<!-- Omitido para facilitar entendimento -->
<fieldset>
<legend>Número</legend>
<label for="texto">Type: number</label><br>
<input type="number" id="texto" value="1">
</fieldset>
Figura 19: tag input com o atributo type="number"
| Fonte: Autoria própria |
type="email"¶É um campo destinado a inserção do email. O navegador fará a validação básica. Nos dispositivos móveis, o teclado é exibido A-Z, ponto, botão _123(leva ao teclado modificado) incluindo o caracter @.
Sintaxe:
Arquivo: index.html
<!-- Arquivo index.html -->
<!-- Estrutura HTML mantida a mesma do exemplo anterior, exceto a inclusão das opções do input -->
<!-- Omitido para facilitar entendimento -->
<fieldset>
<legend>E-mail</legend>
<label for="texto">Type: e-mail</label><br>
<input type="email" id="texto" placeholder="xx.xx@ifsp.edu.br">
</fieldset>
Figura 20: tag input com o atributo type="email"
| Fonte: Autoria própria |
type="search"¶É um campo de busca, exibido como uma caixa com cantos arredondados. Em alguns navegadores aparece à direita um botão que pode limpá-lo quando selecionado. Já nos dispositivos móveis, exibe a lupa.
Sintaxe:
Arquivo: index.html
<!-- Arquivo index.html -->
<!-- Estrutura HTML mantida a mesma do exemplo anterior, exceto a inclusão das opções do input -->
<!-- Omitido para facilitar entendimento -->
<fieldset>
<legend>Pesquisa</legend>
<label for="texto">Type: search</label><br>
<input type="search" id="texto">
</fieldset>
Figura 21: tag input com o atributo type="search"
| Fonte: Autoria própria |
type="tel"¶É um campo utilizado para inserir um número de telefone. Não exige sintaxe ou padrão específico. Poderá inserir um atributo placeholder para indicar o formato de inserção, pattern para exigir o formato e codificar em javascript a validação deste número.
Sintaxe:
Arquivo: index.html
<!-- Arquivo index.html -->
<!-- Estrutura HTML mantida a mesma do exemplo anterior, exceto a inclusão das opções do input -->
<!-- Omitido para facilitar entendimento -->
<fieldset>
<legend>Telefone</legend>
<label for="texto">Type: tel</label><br>
<input type="tel" id="texto">
</fieldset>
Figura 22: tag input com o atributo type="tel"
| Fonte: Autoria própria |
type="url"¶Arquivo: index.html
<!-- Arquivo index.html -->
<!-- Estrutura HTML mantida a mesma do exemplo anterior, exceto a inclusão das opções do input -->
<!-- Omitido para facilitar entendimento -->
<fieldset>
<legend>URL</legend>
<label for="texto">Type: url</label><br>
<input type="url" id="texto" placeholder="http://www.ifsp.edu.br">
</fieldset>
Figura 23: tag input com o atributo type="url"
| Fonte: Autoria própria |
type="range"¶É exibido na forma de um controle deslizante. Atributos permitidos min, max, step. Em value, defina o ponto inicial a posicionar a marcação do dezlizante.
Sintaxe:
Arquivo: index.html
<!-- Arquivo index.html -->
<!-- Estrutura HTML mantida a mesma do exemplo anterior, exceto a inclusão das opções do input -->
<!-- Omitido para facilitar entendimento -->
<fieldset>
<legend>Faixa</legend>
<label for="texto">Type: range</label><br>
<input type="range" id="texto" min="1" max="10" value="3">
</fieldset>
Figura 24: tag input com o atributo type="range"
| Fonte: Autoria própria |
type="color"¶Permite a seleção de uma cor. Utiliza a paleta de cores do sistema operacional. O valor padrão é #000000.
Sintaxe:
Arquivo: index.html
<!-- Arquivo index.html -->
<!-- Estrutura HTML mantida a mesma do exemplo anterior, exceto a inclusão das opções do input -->
<!-- Omitido para facilitar entendimento -->
<fieldset>
<legend>Cor</legend>
<label for="texto">Type: color</label><br>
<input type="color" id="texto">
</fieldset>
Figura 25: tag input com o atributo type="color"
| Fonte: Autoria própria |
type="date"¶Fornece uma data com ano, mês e dia. Alguns navegadores fornecem o suporte ao calendário.
Sintaxe:
Arquivo: index.html
<!-- Arquivo index.html -->
<!-- Estrutura HTML mantida a mesma do exemplo anterior, exceto a inclusão das opções do input -->
<!-- Omitido para facilitar entendimento -->
<fieldset>
<legend>Data</legend>
<label for="texto">Type: date</label><br>
<input type="date" id="texto">
</fieldset>
Figura 26: tag input com o atributo type="date"
| Fonte: Autoria própria |
type="datetime-local"¶Fornece dois campos: um para data (ano, mês, dia) e outro para hora (hora, minuto, segundo, fração de segundo). Permite usar os atributos min, max, step.
Sintaxe:
Arquivo: index.html
<!-- Arquivo index.html -->
<!-- Estrutura HTML mantida a mesma do exemplo anterior, exceto a inclusão das opções do input -->
<!-- Omitido para facilitar entendimento -->
<fieldset>
<legend>Data Local</legend>
<label for="texto">Type: datetime</label><br>
<input type="datetime-local" id="texto">
</fieldset>
Figura 27: tag input com o atributo type="datetime-local"
| Fonte: Autoria própria |
type="month"¶Arquivo: index.html
<!-- Arquivo index.html -->
<!-- Estrutura HTML mantida a mesma do exemplo anterior, exceto a inclusão das opções do input -->
<!-- Omitido para facilitar entendimento -->
<fieldset>
<legend>Mês</legend>
<label for="texto">Type: month</label><br>
<input type="month" id="texto">
</fieldset>
Figura 28: tag input com o atributo type="month"
| Fonte: Autoria própria |
type="time"¶Arquivo: index.html
<!-- Arquivo index.html -->
<!-- Estrutura HTML mantida a mesma do exemplo anterior, exceto a inclusão das opções do input -->
<!-- Omitido para facilitar entendimento -->
<fieldset>
<legend>Time</legend>
<label for="texto">Type: time</label><br>
<input type="time" id="texto">
</fieldset>
Figura 29: tag input com o atributo type="time"
| Fonte: Autoria própria |
type="week"¶Arquivo: index.html
<!-- Arquivo index.html -->
<!-- Estrutura HTML mantida a mesma do exemplo anterior, exceto a inclusão das opções do input -->
<!-- Omitido para facilitar entendimento -->
<fieldset>
<legend>Semana</legend>
<label for="texto">Type: week</label><br>
<input type="week" id="texto">
</fieldset>
Figura 30: tag input com o atributo type="week"
| Fonte: Autoria própria |
selecte Atributo multiple¶multiple permite a escolhe da mais de uma opção no campo ao ser usado com a tag <select>...</select>. ctrl pressionada enquanto seleciona os itens da lista. Mais itens irão aparecer ao rolar a barra para baixo. <label for="nome">Nome</label>
<select multiple id="nome">
<option>Ana Paula</option>
<option>Paula</option>
<option>Ana</option>
<option>Paula Ana</option>
<option>Aninha</option>
</select>
Figura 31: tag select com o atributo multiple
| Fonte: Autoria própria |
<fieldset>
<legend>Seletores</legend>
<div>
<label for="cores">Cores</label>
<select name="tabelaCores" id="cores">
<option value="0">Selecione..</option>
<option value="1">vermelho</option>
<option value="2">verde</option>
<option value="3">amarelo</option>
</select><br>
</div>
</fieldset>
Saída:
<fieldset>
<legend>Seletores</legend>
<div>
<label for="dias">Dias da Semana</label><br>
<div>
<select name="DiasSemana" multiple id="dias">
<option value="Dom">Domingo</option>
<option value="Seg">Segunda</option>
<option value="Ter">Terça</option>
<option value="Qua">Quarta</option>
<option value="Qui">Quinta</option>
<option value="Sex">Sexta</option>
<option value="Sab">Sábado</option>
</select><br>
</div>
</div>
</fieldset>
Saída:
<fieldset>
<legend>Seletores</legend>
<div class="form-group">
<label for="equip">Equipamentos</label>
<select name="equipa" id="equip">
<option>Selecione...</option>
<optgroup label="Hardware">
<option value="tec">Teclado</option>
<option value="mou">Mouse</option>
</optgroup>
<optgroup label="Software">
<option value="java">Java</option>
<option value="c#">C#</option>
</optgroup>
</select>
</div>
</fieldset>
Saída:
tabindex¶tabindex: indica se um elemento pode receber foco de entrada (se ele é focável), se e em qual posição ele deve fazer parte da navegação sequencial do teclado (geralmente com a tecla Tab). <fieldset>
<legend>Informações Pessoais</legend>
<p>Selecione qualquer um dos itens:</p>
<label for="um">Elemento inicial:</label>
<input type="text" id="um">
<div tabindex="0">Segundo elemento.</div>
<div>Elemento não indexado com tab.</div>
<label for="tres">Terceiro elemento:</label>
<input type="text" id="tres">
</fieldset>
Saída:
<fieldset>
<legend> Textarea </legend>
<label for="texto">Textarea</label><br>
<textarea id="texto" wrap="soft">Digite aqui seu texto</textarea>
</fieldset>
<fieldset>
<legend> Textarea </legend>
<label for="texto">Textarea</label><br>
<textarea id="texto" wrap="hard" cols="50">Digite aqui seu texto</textarea>
</fieldset>
Saída:
| wrap: soft | wrap: hard cols = 20 | |
|---|---|---|
O elemento list recebe como valor o identificador do elemento < datalist > que contém a lista.
Sintaxe:
<fieldset>
<legend>Listagem</legend>
<div hidden>
<datalist id="contactlist" class="form-control">
<option value="anapaula@xx.com.br" label="Ana Paula">
<option value="paula@xx.com.br" label="Paula">
<option value="giancoli@xx.com.br" label="Giancoli">
</datalist>
</div>
<div class="form-group">
<label for="contato">Contato:</label>
<input class="form-control" type="email" id="contato" list="contactlist">
</div>
</fieldset>
Saída:
<fieldset>
<legend>Botão Button</legend>
<button type="button">Tipo button</button>
</fieldset>
<fieldset>
<legend>Botão Submit</legend>
<button type="submit">Tipo submit</button>
</fieldset>
<fieldset>
<legend>Botão Reset</legend>
<button type="reset">Tipo Reset</button>
</fieldset>
Saída:
<fieldset>
<legend>Uso do Output</legend>
<h2>Multiplicação</h2>
<form oninput="output.value = parseInt(val1.valueAsNumber || 0) * parseInt(val2.valueAsNumber || 0)" id=foo>
<input id=a type=number name=val1 tabindex="1"> x
<input id=b type=number name=val2 tabindex="2"> =
<output name=output for="val1 val2" form=foo>000</output>
</form>
<h2>Soma</h2>
<form oninput="output.value = parseInt(val3.valueAsNumber || 0) + parseInt(val4.valueAsNumber || 0)" id=foo1>
<input id=c type=number name=val3 tabindex="3"> +
<input id=d type=number name=val4 tabindex="4"> =
<output name=output for="val3 val4" form=foo1>000</output>
</form>
<h2>Subtração</h2>
<form oninput="output.value = parseInt(val5.valueAsNumber || 0) - parseInt(val6.valueAsNumber || 0)" id=foo2>
<input id=e type=number name=val5 tabindex="5"> -
<input id=f type=number name=val6 tabindex="6"> =
<output name=output for="val5 val6" form=foo2>000</output>
</form>
<h2>Divisão</h2>
<form oninput="output.value = parseInt(val7.valueAsNumber || 0) / parseInt(val8.valueAsNumber || 0)" id=foo3>
<input id=g type=number name=val7 tabindex="7"> /
<input id=h type=number name=val8 tabindex="8"> =
<output name=output for="val7 val8" form=foo3>000</output>
</form>
</fieldset>
Saída:
<fieldset>
<legend>Exemplos Range, Meter, Progress</legend>
<h4>Range</h4>
<input type="range" id="texto" name="range" min="0" max="100" step="1"><br><br>
<h4>Meter</h4>
<meter value="60" name="meter" min="0" max="100" low="73" high="87">D--</meter><br><br>
<h4>Progress</h4>
<progress value="80" name="prog" max="100"><span id=""complete">0</span>%</progress>
</fieldset>
Saída:
ADS - HTML5, CSS3, JS.
Modelo e formato elaborado pela profa. Ana Paula Müller Giancoli - BSD 2-Clause License. - Julho.2022.